<template>
  <div id="trade">
    <div class="trade-top">
        <el-tabs v-model="activeName" style="height:100%;" type="border-card" @tab-click="tabClick">

          <!-- ------------------------------usdt------------------------------ -->
          <el-tab-pane :lazy="true" label="USDT" name="usdt">
            <div class="trade-report">
              <table style="width:100%;height:100%">
                <tbody>
                  <tr>
                    <td width="16.66%" class="report-title">累计盈利：</td>
                    <td width="16.66%" class="report-value"> <span class="report-value report-value-green">{{profitSum}}</span> USDT</td>
                    <!-- <td width="16.66%" class="report-title">约合法币：</td>
                    <td width="16.66%" class="report-value"> <span class="report-value report-value-green">66.00</span> RMB</td> -->
                    <td width="16.66%" class="report-title">策略单数：</td>
                    <td width="16.66%" class="report-value"> {{tableData.length}} 单</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-card class="trade-list">
             <el-table
                :data="pageData"
                border
                style="width: 100%"
                :highlight-current-row="true"
                >
                <el-table-column
                  prop="symbol"
                  label="货币对"
                  width="110"
                  header-align="center"
                  align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">货币对</span>
                  </template>
                   <template slot-scope="scope">
                    <span>{{ scope.row.symbol.toUpperCase() }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="formatDateTime"
                  label="止盈时间"
                  header-align="center"
                  align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈时间</span>
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.formatDateTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sellAmount"
                  label="止盈数量"
                  header-align="center"
                  align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈数量</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="profit"
                  label="盈利金额"
                  header-align="center"
                  align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利金额(USDT)</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="profitPercent"
                  label="盈利比"
                  header-align="center"
                  align="right"
                   width="110"
                 >
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利比</span>
                  </template>
                 <template slot-scope="scope">
                    <span style="color:green;font-weight:bold;font-size:15px;">{{ scope.row.profitPercent + '%' }}</span>
                  </template>
                </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                     header-align="center"
                    align="center"
                    width="70">
                     <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">操作</span>
                  </template>
                    <template slot-scope="scope">
                      <el-button @click="detailClick(scope.row)" type="text" size="small">祥情</el-button>
                    </template>
                  </el-table-column>
              </el-table>


               <div style="text-align:center;margin-top:5px;">
                  <el-pagination 
                  background
                  layout="total, prev, pager, next"
                  prev-text="上一页"
                  next-text="下一页"
                  @current-change="toPage"
                  :page-size="pageSize"
                  :total="tableData.length">
                </el-pagination>

               </div>
            </el-card>
          </el-tab-pane>
          <!-- ------------------------------btc------------------------------ -->
          <el-tab-pane :lazy="true" label="BTC" name="btc">
             <div class="trade-report">
              <table style="width:100%;height:100%">
                <tbody>
                  <tr>
                    <td width="16.66%" class="report-title">累计盈利：</td>
                    <td width="16.66%" class="report-value"> <span class="report-value report-value-green">{{profitSum}}</span> BTC</td>
                    <td width="16.66%" class="report-title">策略单数：</td>
                    <td width="16.66%" class="report-value"> {{tableData.length}} 单</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-card class="trade-list">
             <el-table  :data="pageData" border style="width: 100%" :highlight-current-row="true" >
                <el-table-column prop="symbol"  label="货币对" width="110" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">货币对</span>
                  </template>
                   <template slot-scope="scope">
                    <span>{{ scope.row.symbol.toUpperCase() }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="formatDateTime" label="止盈时间" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈时间</span>
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.formatDateTime }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="sellAmount" label="止盈数量" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈数量</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profit" label="盈利金额" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利金额(BTC)</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profitPercent"  label="盈利比"   header-align="center"  align="right" width="110"  >
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利比</span>
                  </template>
                 <template slot-scope="scope">
                    <span style="color:green;font-weight:bold;font-size:15px;">{{ scope.row.profitPercent + '%' }}</span>
                  </template>
                </el-table-column>

                  <el-table-column  fixed="right" label="操作" header-align="center"  align="center" width="70">
                    <template slot="header">
                      <span style="font-weight:bold;font-size:15px;color:#666">操作</span>
                    </template>
                    <template slot-scope="scope">
                      <el-button @click="detailClick(scope.row)" type="text" size="small">祥情</el-button>
                    </template>
                  </el-table-column>
               </el-table>

                  <div style="text-align:center;margin-top:5px;">
                    <el-pagination  background layout="total, prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="toPage" :page-size="pageSize" :total="tableData.length">
                  </el-pagination>
               </div>
            </el-card>

          </el-tab-pane>
           <!-- ------------------------------eth------------------------------ -->
          <el-tab-pane :lazy="true" label="ETH" name="eth">
             <div class="trade-report">
              <table style="width:100%;height:100%">
                <tbody>
                  <tr>
                    <td width="16.66%" class="report-title">累计盈利：</td>
                    <td width="16.66%" class="report-value"> <span class="report-value report-value-green">{{profitSum}}</span> ETH</td>
                    <td width="16.66%" class="report-title">策略单数：</td>
                    <td width="16.66%" class="report-value"> {{tableData.length}} 单</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-card class="trade-list">
             <el-table  :data="pageData" border style="width: 100%" :highlight-current-row="true" >
                <el-table-column prop="symbol"  label="货币对" width="110" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">货币对</span>
                  </template>
                   <template slot-scope="scope">
                    <span>{{ scope.row.symbol.toUpperCase() }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="formatDateTime" label="止盈时间" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈时间</span>
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.formatDateTime }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="sellAmount" label="止盈数量" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈数量</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profit" label="盈利金额" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利金额(ETH)</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profitPercent"  label="盈利比"   header-align="center"  align="right" width="110"  >
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利比</span>
                  </template>
                 <template slot-scope="scope">
                    <span style="color:green;font-weight:bold;font-size:15px;">{{ scope.row.profitPercent + '%' }}</span>
                  </template>
                </el-table-column>

                  <el-table-column  fixed="right" label="操作" header-align="center"  align="center" width="70">
                    <template slot="header">
                      <span style="font-weight:bold;font-size:15px;color:#666">操作</span>
                    </template>
                    <template slot-scope="scope">
                      <el-button @click="detailClick(scope.row)" type="text" size="small">祥情</el-button>
                    </template>
                  </el-table-column>
               </el-table>

                  <div style="text-align:center;margin-top:5px;">
                    <el-pagination  background layout="total, prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="toPage" :page-size="pageSize" :total="tableData.length">
                  </el-pagination>
               </div>
            </el-card>
          </el-tab-pane>

           <!-- ------------------------------ht------------------------------ -->
          <el-tab-pane :lazy="true" label="HT" name="ht">
             <div class="trade-report">
              <table style="width:100%;height:100%">
                <tbody>
                  <tr>
                    <td width="16.66%" class="report-title">累计盈利：</td>
                    <td width="16.66%" class="report-value"> <span class="report-value report-value-green">{{profitSum}}</span> HT</td>
                    <td width="16.66%" class="report-title">策略单数：</td>
                    <td width="16.66%" class="report-value"> {{tableData.length}} 单</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-card class="trade-list">
             <el-table  :data="pageData" border style="width: 100%" :highlight-current-row="true" >
                <el-table-column prop="symbol"  label="货币对" width="110" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">货币对</span>
                  </template>
                   <template slot-scope="scope">
                    <span>{{ scope.row.symbol.toUpperCase() }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="formatDateTime" label="止盈时间" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈时间</span>
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.formatDateTime }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="sellAmount" label="止盈数量" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈数量</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profit" label="盈利金额" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利金额(HT)</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profitPercent"  label="盈利比"   header-align="center"  align="right" width="110"  >
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利比</span>
                  </template>
                 <template slot-scope="scope">
                    <span style="color:green;font-weight:bold;font-size:15px;">{{ scope.row.profitPercent + '%' }}</span>
                  </template>
                </el-table-column>

                  <el-table-column  fixed="right" label="操作" header-align="center"  align="center" width="70">
                    <template slot="header">
                      <span style="font-weight:bold;font-size:15px;color:#666">操作</span>
                    </template>
                    <template slot-scope="scope">
                      <el-button @click="detailClick(scope.row)" type="text" size="small">祥情</el-button>
                    </template>
                  </el-table-column>
               </el-table>

                  <div style="text-align:center;margin-top:5px;">
                    <el-pagination  background layout="total, prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="toPage" :page-size="pageSize" :total="tableData.length">
                  </el-pagination>
               </div>
            </el-card>
          </el-tab-pane>

          
           <!-- ------------------------------husd------------------------------ -->
          <el-tab-pane :lazy="true" label="HUSD" name="husd">
             <div class="trade-report">
              <table style="width:100%;height:100%">
                <tbody>
                  <tr>
                    <td width="16.66%" class="report-title">累计盈利：</td>
                    <td width="16.66%" class="report-value"> <span class="report-value report-value-green">{{profitSum}}</span> HUSD</td>
                    <td width="16.66%" class="report-title">策略单数：</td>
                    <td width="16.66%" class="report-value"> {{tableData.length}} 单</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-card class="trade-list">
             <el-table  :data="pageData" border style="width: 100%" :highlight-current-row="true" >
                <el-table-column prop="symbol"  label="货币对" width="110" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">货币对</span>
                  </template>
                   <template slot-scope="scope">
                    <span>{{ scope.row.symbol.toUpperCase() }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="formatDateTime" label="止盈时间" header-align="center" align="center">
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈时间</span>
                  </template>
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.formatDateTime }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="sellAmount" label="止盈数量" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">止盈数量</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profit" label="盈利金额" header-align="center" align="right">
                   <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利金额(HUSD)</span>
                  </template>
                </el-table-column>

                <el-table-column prop="profitPercent"  label="盈利比"   header-align="center"  align="right" width="110"  >
                  <template slot="header">
                    <span style="font-weight:bold;font-size:15px;color:#666">盈利比</span>
                  </template>
                 <template slot-scope="scope">
                    <span style="color:green;font-weight:bold;font-size:15px;">{{ scope.row.profitPercent + '%' }}</span>
                  </template>
                </el-table-column>

                  <el-table-column  fixed="right" label="操作" header-align="center"  align="center" width="70">
                    <template slot="header">
                      <span style="font-weight:bold;font-size:15px;color:#666">操作</span>
                    </template>
                    <template slot-scope="scope">
                      <el-button @click="detailClick(scope.row)" type="text" size="small">祥情</el-button>
                    </template>
                  </el-table-column>
               </el-table>

                  <div style="text-align:center;margin-top:5px;">
                    <el-pagination  background layout="total, prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="toPage" :page-size="pageSize" :total="tableData.length">
                  </el-pagination>
               </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
    </div>

      <!-- ------------------------------details------------------------------ -->
    <el-drawer
      :visible.sync="detailShow"
      direction="btt"
      size="50%"
       :with-header="false">
      <el-table :data="detailData"  style="width: 100%;">
          <el-table-column property="orderId" header-align="center"  align="center" label="订单号" width="140">
          </el-table-column>
          <el-table-column property="symbol" header-align="center" align="center" label="货币对">
            <template slot-scope="scope">
                  <span>{{ scope.row.symbol.toUpperCase() }}</span>
            </template>
          </el-table-column>
          <el-table-column property="type" header-align="center" align="center" label="交易类型" >
             <template slot-scope="scope">
                  <span v-if="scope.row.type == 'buy-market'">市价</span>
                   <span v-if="scope.row.type == 'sell-market'">市价</span>
            </template>
          </el-table-column>
          <el-table-column property="direction" header-align="center" align="center" label="方向" >
            <template slot-scope="scope">
                    <el-tag v-if="scope.row.direction == 'buy'" type="success" effect="plain">买入</el-tag>
                    <el-tag v-if="scope.row.direction == 'sell'" type="danger" effect="plain">卖出</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="tradeMode" header-align="center" align="center" label="交易模式" >
              <template slot-scope="scope">
                    <span v-if="scope.row.tradeMode == 1">自动</span>
                    <span v-if="scope.row.tradeMode == 2">手动</span>
            </template>
          </el-table-column>
          <el-table-column property="amount" header-align="center" align="right" label="数量" width="150">
              <template slot-scope="scope">
                    <span>{{scope.row.amount + ' ' + scope.row.baseCurrency.toUpperCase()}}</span>
             </template>
          </el-table-column>
          <el-table-column property="money" header-align="center" align="right" label="金额" width="100">
              <template slot-scope="scope">
                    <span>{{scope.row.money + ' ' + scope.row.quoteCurrency.toUpperCase()}}</span>
             </template>

          </el-table-column>
          <el-table-column property="formatDateTime" header-align="left" align="left" label="交易时间" width="170">
             <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.formatDateTime }}</span>
             </template>
          </el-table-column>
        </el-table>
    </el-drawer>
  </div>
</template>

<script>
import $ from 'jquery';

const math = require('mathjs')
const accounting = require('accounting');
const { ipcRenderer } =  window.require('electron');
const moment = require('moment');
export default {
  name: 'Home',
 data(){
   return {
    activeName:'usdt',
    pageSize:10,
    detailShow:false,
    tableData: [],
    pageData:[],
    detailData:[],

   }
 },
 computed:{
   profitSum:function(){
     let value = math.chain(0);
     for(let i in this.tableData){
       value = value.add(this.tableData[i].profit);
     }
     return value;

   }
 },
 methods:{
  detailClick(row){
    this.detailShow = true;
  this.loadDetailData(row);


  },
  toPage(currentPage){
    let startIndex = (currentPage - 1) * this.pageSize;
   this.pageData = this.tableData.slice(startIndex,startIndex+this.pageSize);
  },
   tabClick(obj){
     this.loadTableData(this.activeName);
   },
   profitPercentFormatter:function(row, column, cellValue, index){
    return cellValue;
   },
   groupBy(array , field ) {
    let groups = {};
    array.forEach( function( o ) {
        let group = JSON.stringify( o[field] );
        groups[group] = groups[group] || [];
        groups[group].push( o );
    });
    return Object.values(groups);
  },
  loadDetailData(row){
    this.detailData = [];

    ipcRenderer.once('listTradeByTaskId-res',(event,list)=>{
      console.log('listTradeByTaskId-res',list)
        for(let i in list){
            let item = list[i];
              item.datetime = moment(item.createdAt).unix()
              item.formatDateTime = moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
        }
        let sorted = list.sort(function(a,b){
              let tempa = a['datetime'];
              let tempb = b['datetime'];
                return tempa > tempb ? -1 : 1;
        })
        this.detailData = sorted;
    })
    ipcRenderer.send('listTradeByTaskId',{taskId:row.taskId,loopCount:row.loopCount});

  },
  loadTableData(quoteCurrency){
    this.tableData = [];
    this.pageData = [];

    ipcRenderer.once('listTrade-res',(event,list)=>{
      console.log('listTrade-res',list)
            //分组结果
            let groupResult = new Array();
            //先按照taskId进行分析，因为多个任务之间会有相同的loopCount
            let groupTask = this.groupBy(list,'taskId');
            // console.log(groupTask)
            for(let i in groupTask){
              let array = groupTask[i];
              //每个分组之间再按照loopCount分组
              let groupLoop = this.groupBy(array,'loopCount');
                  for(let k in groupLoop){
                    let subArr = groupLoop[k];
                      groupResult.push(subArr);
                  }
            }

            //计算每个分组中的买入和卖出金额，并计算盈利比
            let result = [];
            for(let i in groupResult){
              let groups = groupResult[i];

              let buyMoney = math.chain(0),
                  sellMoney = math.chain(0),
                  sellAmount = math.chain(0),
                  datetime,
                  symbol,
                  taskId,
                  loopCount;
              for(let k in groups){
                  let groupItem = groups[k];
                  let money = groupItem.money;
                  symbol = groupItem.symbol;
                  taskId = groupItem.taskId;
                  loopCount = groupItem.loopCount;
                  if(groupItem.direction == 'buy'){
                    buyMoney = buyMoney.add(money);
                  }else if(groupItem.direction == 'sell'){
                    sellMoney = sellMoney.add(money);
                    sellAmount = sellAmount.add(groupItem.amount);
                    datetime = groupItem.createdAt;
                  }
              }
              let profit = sellMoney.subtract(buyMoney.done());
              let profitPercent =  profit.divide(buyMoney.done()).multiply(100);
              profitPercent = accounting.formatNumber(profitPercent.done(),2)
              let item = {
                taskId:taskId,
                loopCount:loopCount,
                symbol:symbol,
                buyMoney:buyMoney.done(),
                sellMoney:sellMoney.done(),
                sellAmount:sellAmount.done(),
                profit:profit.done(),
                profitPercent:profitPercent,
                datetime:moment(datetime).unix(),
                formatDateTime:moment(datetime).format('YYYY-MM-DD HH:mm:ss')
              }
              result.push(item)
            }

            let sorted = result.sort(function(a,b){
                  let tempa = a['datetime'];
                  let tempb = b['datetime'];
                    return tempa > tempb ? -1 : 1;
                  
            })
            this.tableData = sorted;
            this.toPage(1);
    })

    ipcRenderer.send('listTrade',{quoteCurrency:quoteCurrency});

  }
   
      
 },
 updated(){

 },
 mounted(){
   this.loadTableData(this.activeName);


 }
};
</script>

<style lang="less">
#trade{
  display:flex;
  flex-direction: column;
  width:100vw;
  height:100vh;
 

  .trade-top{
      flex:1;
      .trade-report{
        border:1px solid #ccc;
        height:50px;
        border-radius:10px;
        background:#34629C;
        color:#fff;

        .report-title{
          font-weight:bold;
          text-align:right;
        }
         .report-value{
          font-weight:bold;
          text-align:left;
        }
      }

      .trade-list{
        margin-top:8px;
      }
  }

  // .trade-bottom{
  //   height:300px;
  //   border-top:6px solid #ccc;
  // }

.el-table__body tr.current-row>td {
    background-color: #409EFF;
    color:#fff;
    font-weight:bold;
    font-size:14px;
}

.el-table__body tr.current-row>td .el-button--text {
    color:#fff;
    font-weight:bold;
    font-size:14px;
}
  .el-drawer__body{
    overflow-y: auto;
  }

}

  
</style>
